<script setup lang='ts'>
import { ref } from "vue"
const props = withDefaults(defineProps<{
    modelValue?: string,
    readonly?: boolean,
    defaultValue?: any
}>(), { readonly: false })
const emits = defineEmits(["update:modelValue"]);
const inputHandler = (e: any) => {
    emits('update:modelValue', (e.target.value).toString())
}
const mouseFlag = ref(false)
const resetDefult = () => {
    emits('update:modelValue', props.defaultValue)
}
</script>

<template>
    <div class=" readonly_flag">
        <div style="flex: 1;" ><textarea type="text" :value="modelValue" @input="inputHandler($event)" /></div>
        
        <!-- <div v-if="!readonly && defaultValue !== undefined && modelValue !== defaultValue" class="checkbox"
            @click.stop.prevent="resetDefult" @mouseover="mouseFlag = true" @mouseout="mouseFlag = false">
            <es-icon :name="'huaban'" :color="mouseFlag ? 'rgba(230, 230, 230, 1)' : 'rgba(230, 230, 230, 0.4)'"
                :size="14" />
        </div> -->
    </div>

</template>

<style scoped>
textarea {
    width: 100%;
    /* flex: 1; */
    min-height: 110px;
    height: auto;
    background: rgba(28, 28, 29, 0.6);
    border-radius: 4px;
    border: 1px solid #3b3c40;
    color: rgba(230, 230, 230, 1);
    padding-left: 11px;
    box-sizing: border-box;
    resize: none;
    word-wrap: break-word;
    outline: none;
}

textarea:focus {
    border: 1px solid #2c68f7;
}

textarea:hover {
    border: 1px solid #2c68f7;
}

textarea::-webkit-scrollbar {
    width: 3px;
    background-color: rgba(41, 42, 46, 1);
    border-radius: 2px;
}

textarea::-webkit-scrollbar-thumb {
    background-color: rgba(183, 183, 183, 1);
    border-radius: 2px;
}

.readonly_flag {
    width: 100%;
    height: 110px;
    /* background: rgba(28, 28, 29, 0.80); */
    border: none;
    color: rgba(230, 230, 230, 1);
    margin-top: 5px;
    outline: none;
    resize: none;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    border: 1px solid rgba(230, 230, 230, 0.4);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    margin-left: 10px;

}
</style>